@import './style.scss';

$focusBorderColor: rgba(25, 243, 243, .5);
$editBorderColor: red;
$editableColor: rgb(240, 223, 223);

.cell {
  @include cell;
  color: rgb(29,33,41);
  background-color: #fff;
  position: relative;
  word-break: break-all;

  .input {
    text-align: center;
    padding: 0 5px;
  }

  &.focus {
    box-shadow: inset 1px 1px $focusBorderColor, inset -1px -1px $focusBorderColor;
  }

  &.edit {
    box-shadow: none;
    padding: 0;
  }

  &.editable {
    cursor: cell;
    // background-color: #fafafa;
    background-color: #cae1f8;
  }

  &.fixedRight,
  &.fixedLeft {
    position: sticky;
    z-index: 10;
  }

  &.fixedLeft.first {
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: -1px;
      width: 10px;
      pointer-events: none;
      transform: translateX(100%);
      transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
      box-shadow: inset 6px 0 8px -3px rgba(0, 0, 0, 0.15);
    }
  }

  &.fixedRight.first {
    &::after {
      box-shadow: inset -6px 0 8px -3px rgba(0, 0, 0, 0.15);
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: -1px;
      width: 10px;
      pointer-events: none;
      transform: translateX(-100%);
      transition: box-shadow 0.1s cubic-bezier(0, 0, 1, 1);
    }
  }
}
